<template>
  <div class="center_bottom">
    <Echart
      :options="options"
      id="bottomLeftChart"
      class="echarts_bottom"
    ></Echart>
  </div>
</template>

<script>
import { currentGET } from "api";
import { graphic } from "echarts";
// var data = [
//   {
//     planCourseCnt: 1554,
//     realBeginTime: null,
//     realCourseCnt: 211,
//     roomType: null,
//     scheduleCount: 0,
//     status: null,
//     subjectName: null,
//     teacherUserName: "10kV紫线",
//     userName: null,
//   },
// ];
// var areaName = [],
//   realCourseCnt = [],
//   planCourseCnt = [],
//   CourseRate = [],
//   maxCount = [];
// var fullAreaName = [];
// for (var i = 0; i < data.length; i++) {
//   areaName.push(data[i].teacherUserName);
//   fullAreaName.push(data[i].teacherUserName);
//   realCourseCnt.push(data[i].realCourseCnt);
//   planCourseCnt.push(data[i].planCourseCnt);
//   CourseRate.push(
//     "(" +
//       ((data[i].realCourseCnt * 100) / data[i].planCourseCnt).toFixed(0) +
//       "%)"
//   );
// }
// var maxPlanCourseCnt = Math.max.apply(null, planCourseCnt);
// var maxRealCourseCnt = Math.max.apply(null, realCourseCnt);
// var maxCourseCnt = Math.max(maxPlanCourseCnt, maxRealCourseCnt);

export default {
  data() {
    return {
      options: {},
    };
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    this.init(this.data)
  },
  watch: {
    data: {
      handler(val) {
        this.init(val);
      },
      deep: true,
    },
  },
  methods: {
    init(newData) {
      const areaName = [],
        realCourseCnt = [],
        completion = [],
        planCourseCnt = [];
      newData.filter(item => (item.lineName || item.planned || item.completion)).forEach((item) => {
        // 名字
        areaName.push(item.lineName);
        // 实际
        realCourseCnt.push(Number(item.planned * item.completion).toFixed(1));
        // 计划
        planCourseCnt.push(Number(item.planned).toFixed(1));
        // 完成率
        completion.push(Number(item.completion * 100).toFixed(0));
      });
      const maxCourseCnt = Math.max.apply(null, planCourseCnt);
      this.options = {
        backgroundColor: "rgba(4,42,102,0.7)",
        title: {
          text: "",
          left: "70",
          bottom: "-11",
          textStyle: {
            color: "rgba(255,255,255,0.5)",
            fontSize: "12",
            fontfamily: "PingFangMedium",
            fontWeight: "light",
          },
        },
        grid: {
          left: "15",
          top: "55",
          right: "25",
          bottom: "16",
          containLabel: true,
        },
        tooltip: {
          show: "true",
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "none", // 默认为直线，可选为：'line' | 'shadow'
          },
          transitionDuration: 0,
          borderRadius: 8,
          borderWidth: 0,
          padding: [5, 10],
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
          formatter: function (param) {
            var html = areaName[param[1].dataIndex] + "<br/>";
            html += "完成：" + realCourseCnt[param[1].dataIndex] + "<br/>";
            html += "计划：" + planCourseCnt[param[1].dataIndex] + "<br/>";
            html += "完成率：" + completion[param[1].dataIndex] + "%<br/>";
            return html;
          },
        },
        legend: {
          top: 18,
          icon: "circle",
          itemWidth: 9,
          textStyle: {
            color: "#607FB5",
            fontSize: 10,
          },
        },
        xAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          max: maxCourseCnt,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#607FB5",
            },
          },
          axisLabel: {
            show: true,
            fontSize: "10",
            fontWeight: 800,
          },
          // interval: 100,
          splitLine: {
            show: false,
          },
        },
        yAxis: [
          {
            inverse: true,
            type: "category",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#607FB5",
              },
            },
            axisLabel: {
              fontSize: "10",
              fontFamily: "PingFangMedium",
            },
            data: areaName,
          },
          {
            inverse: true,
            type: "category",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#607FB5",
              },
            },
            axisLabel: {
              show: false,
              color: "#fff",
              interval: "0",
              fontSize: "10",
              fontFamily: "myFirstFont",
            },
            position: "right",
            offset: 10,
            data: realCourseCnt,
            zLevel: "3",
          },
        ],
        dataZoom: [
          {
            type: "slider",
            yAxisIndex: [0, 1],
            zoomLock: true,
            width: 7,
            right: 12,
            borderWidth: 0,
            borderColor: "transparent",
            backgroundColor: "rgba(4,42,102,0.7)",
            fillerColor: "#043D92",
            borderRadius: 10,
            handleSize: 0,
            showDetail: false,
            start: 0,
            end: 7 / (planCourseCnt.length || 7) * 100,
            brushSelect: false,
            filterMode: "filter",
            showDataShadow: false,
            realtime: true,
            height: "72%",
            top: "20%",
            textStyle: {
              color: "transparent",
            },
          },
          // {
          //   type: 'inside',
          //   yAxisIndex: [0, 1],
          //   start: 0,
          //   end: 45,
          //   zoomLock: true,
          //   zoomOnMouseWheel: true,
          //   moveOnMouseMove: true,
          //   moveOnMouseWheel: true,
          //   zoomLock: false
          // }
        ],
        // dataZoom: [{
        //     type: 'slider',
        //     yAxisIndex: [0, 1],
        //     zoomLock: true,
        //     width: 0,
        //     borderWidth: 0,
        //      borderColor :'rgba(4,42,102,0.7)',
        //     height: '70%',
        //     handleSize: 0,
        //     showDetail: false,
        //     start: 0,
        //     end: 45,
        //     realtime: true
        // },
        // // {
        // //     type: 'inside',
        // //     // id: 'insideY',
        // //     yAxisIndex: [0, 1],
        // //     start: 0,
        // //     end: 50,
        // //     zoomOnMouseWheel: false,
        // //     moveOnMouseMove: true,
        // //     moveOnMouseWheel: true,
        // //     zoomLock: true
        // // }
        // ],
        series: [
          {
            name: "完成率",
            type: "bar",
            yAxisIndex: 1,
            // yAxisIndex: 2,
            barWidth: "9",
            label: {
              normal: {
                show: false,
                color: "#fff",
                position: [320, -8],
                fontSize: "24",
                fontFamily: "myFirstFont",
              },
            },
            itemStyle: {
              normal: {
                show: true,
                color: new graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#DD9918",
                  },
                  {
                    offset: 1,
                    color: "#E4C545",
                  },
                ]),
                // background: 'linear-gradient( 180deg, #DD9918 0%, #E4C545 100%)',
                // color: 'linear-gradient( 180deg, #DD9918 0%, #E4C545 100%)',
                barBorderRadius: 50,
              },
            },
            barGap: "0%",
            barCategoryGap: "20%",
            data: realCourseCnt,
            zlevel: "2",
          },
          {
            name: "计划值",
            type: "bar",
            yAxisIndex: 0,
            barWidth: "9",
            itemStyle: {
              normal: {
                show: true,
                color: new graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#A2CBFF",
                  },
                  {
                    offset: 1,
                    color: "#2E7FF6",
                  },
                ]),
                borderType: "solid",
                barBorderRadius: 50,
              },
            },
            barGap: "0%",
            barCategoryGap: "20%",
            data: planCourseCnt,
            zlevel: "1",
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.center_bottom {
  width: 100%;
  height: 100%;

  .echarts_bottom {
    width: 100%;
    height: 100%;
  }
}
</style>
